<template>
  <view class="task-list">
    <view v-for="item in taskList" :key="item.id" class="task-list-item" @click="taskInfo(item)">
      <view class="task-list-item-left">
        <Progress :stroke-color="Number(item.status) === 1 ? '#2979FF' : Number(item.status) === 2 ? '#19BE6B' : Number(item.status) === 3 ? '#FF8168' : Number(item.status) === 4 ? '#FFC000' : '#FF7F66'" :value="item.speed | speedToNumber" :stroke-width="5" :radius="28">
          <div class="content">{{ item.speed }}</div>
        </Progress>
      </view>
      <view class="task-list-item-center">
        <view class="task-list-item-center-title">
          {{ item.taskName }}
        </view>
        <view class="task-list-item-center-time">
          {{ item.startTime }}~{{ item.endTime }}
        </view>
        <view v-if="item.sp" class="task-list-item-center-news" />
      </view>
      <!-- <view class="task-list-item-right"><u-image mode="widthFix" :src="item.status | taskStatus" /></view> -->
      <view class="task-list-item-right"><u-image mode="widthFix" :src="taskStatusImg(item.status)" /></view>
      <!-- <view :class="['task-list-item-right', Number(item.status) === 1 ? 'blue' : Number(item.status === 2) ? 'green' : 'red']">
        {{ item.status | taskStatus }}
      </view> -->
      <view class="task-list-item-img">
        <u-image width="100%" height="14px" src="../../../static/img/task/open.png" />
      </view>
      <!-- <u-badge v-if="!xzRole" type="error" :count="item.sp" :offset="['56px', '170px']" is-dot/> -->
      <!-- <u-badge v-if="!xzRole" type="error" :count="item.sp" :offset="[0, 0]" is-dot/> -->
    </view>
  </view>
</template>

<script>
import Progress from 'easy-circular-progress/src/index';
// import { getTaskInfo } from '@/api/task';
export default {
  components: {
    Progress
  },
  filters: {
    // taskStatus(status) {
    // if (Number(status) === 1) {
    //   return '进行中';
    // } else if (Number(status) === 2) {
    //   return '完 成';
    // } else if (Number(status) === 3) {
    //   return '延 期';
    // }
    // if (Number(status) === 1) {
    //   return that.status1;
    // } else if (Number(status) === 2) {
    //   return that.status2;
    // } else if (Number(status) === 3) {
    //   return that.status3;
    // } else if (Number(status) === 4) {
    //   return that.status4;
    // }
    // }
    speedToNumber(string) {
      return string.toString().replace('%', '');
    }
  },
  props: {
    taskList: {
      type: Array,
      default: () => []
    },
    xzRole: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      // timestamp: 86400
      status1: require('@/static/img/task/status1.png'),
      status2: require('@/static/img/task/status2.png'),
      status3: require('@/static/img/task/status3.png'),
      status4: require('@/static/img/task/status4.png'),
      status5: require('@/static/img/task/status5.png')
    };
  },
  computed: {
    taskStatusImg() {
      return (status) => {
        if (Number(status) === 1) {
          return this.status1;
        } else if (Number(status) === 2) {
          return this.status2;
        } else if (Number(status) === 3) {
          return this.status3;
        } else if (Number(status) === 4) {
          return this.status4;
        } else if (Number(status) === 5) {
          return this.status5;
        }
      };
    }
  },
  methods: {
    // aaa(status) {
    //   if (Number(status) === 1) {
    //     return that.status1;
    //   } else if (Number(status) === 2) {
    //     return that.status2;
    //   } else if (Number(status) === 3) {
    //     return that.status3;
    //   } else if (Number(status) === 4) {
    //     return that.status4;
    //   }
    // },
    taskInfo(obj) {
      // console.log(obj);
      // getTaskInfo({
      //   guid: obj.guid,
      //   enterpriseGuid: '' // 单位guid(内存中)
      // }).then(res => {
      //   const { success } = res;
      //   if (success) {
      //     this.$store.dispatch('task/getTaskDetail', obj.programGuid);
      //     this.$router.push({
      //       path: '/taskdetail/taskinfo',
      //       query: {
      //         guid: obj.guid,
      //         enterpriseGuid: ''
      //       }
      //     });
      //   }
      // });
      const { guid: taskGuid, programGuid, status, enterpriseCode } = obj;
      this.$store.dispatch('task/getTaskDetail', {
        taskGuid, programGuid, xzRole: this.xzRole, status, enterpriseCode,
        action: (res, type) => {
          if (type === '明细') {
            const query = {
              guid: obj.guid,
              programGuid: obj.programGuid,
              status: this.xzRole && status,
              enterpriseCode: enterpriseCode,
              xzRole: this.xzRole
            };
            this.$router.push({
              path: '/taskdetail/taskinfo',
              query
            });
          }
        }
      });
      // this.$router.push({
      //   path: '/taskdetail/taskinfo',
      //   query: {
      //     guid: obj.guid,
      //     programGuid: obj.programGuid
      //   }
      // });
    }
  }
};
</script>

<style lang="less" scoped>
  .task-list-item{
    position: relative;
    display: flex;
    height: 73px;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(182,185,191,0.2);
    .task-list-item-left{
      width: 73px;
      padding-left: 10px;
      padding-top: 5px;
      height: 73px;
      .Progress{
        width: 56px;
        height: 56px;
      }
    }
    .task-list-item-center{
      padding-left: 10px;
      padding-right: 10px;
      flex: 1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      position: relative;
      .task-list-item-center-title{
        height: 24px;
        opacity: 1;
        font-size: 17px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 600;
        text-align: left;
        color: #303133;
        line-height: 24px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
      }
      .task-list-item-center-time{
        padding-top: 5px;
        height: 22px;
        opacity: 1;
        font-size: 16px;
        font-family: DINCondensed, DINCondensed-Bold;
        text-align: left;
        color: #b6b9bf;
        line-height: 19px;
        letter-spacing: 0px;
      }
      .task-list-item-center-news{
        width: 10px;
        height: 10px;
        background-color: #ff654d;
        border-radius: 50%;
        position: absolute;
        top: 19px;
        right: 3px;
      }
    }
    .task-list-item-right{
      width: 52px;
      height: 22px;
      text-align: center;
      color: #fff;
      border-radius: 10px;
      font-size: 15px;
    }
    // .blue{
    //   background-color: #4FACFF;
    // }
    // .red {
    //   background-color: #FF8168;
    // }
    // .green {
    //   background-color: #2AD28C;
    // }
    .task-list-item-img{
      width: 8px;
      height: 73px;
      line-height: 76px;
      margin-left: 8px;
      margin-right: 12px;
    }
  }
</style>
